<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">反馈建议</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right" @tap="navTo('/pages/user/myFeedback')">我的反馈</view>
			</view>
		</u-navbar>
		
		<view class="proposal">
			<view class="title">问题描述<text>*</text></view>
			<u--textarea class="textareaBox" v-model="proposal" placeholder="请详细描述您遇到的问题(不少于10字)" height="400upx" count maxlength="500"></u--textarea>
			<!-- <view class="upload">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true"></u-upload>
			</view> -->
		</view>
		<view class="submit-bottom">
			<view class="submit-btn" @tap="feedbackApi">立即提交</view>
		</view>
	</view>
</template>

<script>
	import {addFreedback} from '@/api/user.js'
	export default {
		data() {
			return {
				proposal: '',
				fileList: []
			}
		},
		methods: {
			feedbackApi(){
				let str = this.proposal.replace(/^\s*|\s*$/g, "");
				if(str == ""){
					this.$u.toast('请输入反馈意见！');
				}else if(str.length < 10){
					this.$u.toast('反馈意见不少于10个字！');
				}else{
					addFreedback({
						infos:str,
						source:3,
						userType:1,
						imgs:null
					}).then(res => {
					if (res.data.success) {
						this.proposal = "";
						this.$u.toast('已提交反馈！');
						setTimeout(()=>{
							this.navTo("/pages/user/myFeedback");
						},1500);
					}else{
						this.$u.toast(res.data.msg);
					}
				}).catch(err=>{});
				}
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				};
			},
			navTo(url){
				uni.navigateTo({
					url
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(lists)
				this.uploadFilePromise(lists[0].url);
			},
			uploadFilePromise(url) {
				let token = uni.getStorageSync('newToken').token;
				let a = uni.uploadFile({
					url: BASE_API + '/uploadFiles/ossUpload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					header:{token},
					formData: {
						user: 'test',
						isPrivate:false
					},
					success: (res) => {
						console.log(res)
						let data = JSON.parse(res.data);
						if(data.success){
							this.fileList = [{url:this.pathImg + data.obj}];
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 120upx 0 0;
		background-color: #fff;
		
		.icon-right{
			color: #fff;
			font-size: 24upx;
			padding-right: 20upx;
			padding-top: 40upx;
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		
		.proposal {
			width: 100%;
			padding: 40upx 30upx;
			height: 580upx;
			position: relative;
			.title{
				font-weight: bold;
				font-size: 40upx;
				color: #333;
				padding-bottom: 36upx;
				text{
					color: #EB5703;
				}
			}
			.textareaBox{
				background-color: #fff;
				color: #333;
				padding: 0;
			}
			.upload {
				position: absolute;
				left: 40upx;
				bottom: 40upx;
			}
		}
		.submit-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 0upx 58upx;
			position: fixed;
			left: 0;
			bottom: 60upx;
			.submit-btn {
				width: 100%;
				height: 100upx;
				font-size: 30upx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #2c1769;
			}
		}
	}
</style>

<style lang="scss">
	

	
</style>
